<!DOCTYPE html>
<html lang="en" class="app">
<head>
<meta charset="utf-8" />
<title>Musik | Web Application</title>
<meta name="description"
	content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="js/jPlayer/jplayer.flat.css"
	type="text/css" />
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/animate.css" type="text/css" />
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="css/simple-line-icons.css" type="text/css" />
<link rel="stylesheet" href="css/font.css" type="text/css" />
<link rel="stylesheet" href="css/app.css" type="text/css" />
<!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="">
	<section class="hbox stretch">
		<!-- .aside -->
		<aside class="bg-light aside b-r animated fadeInLeftBig">
			<section class="vbox">
				<header class="header b-b navbar">
					<a class="btn btn-link pull-right visible-xs"
						data-toggle="class:show" data-target=".nav-primary"> <i
						class="fa fa-bars"></i>
					</a> <a href="index.html" class="navbar-brand">Documents</a>
				</header>
				<section class="scrollable">
					<nav class="nav-primary hidden-xs nav-docs">
						<ul class="nav">
							<li class="dropdown-header b-b b-light"><em>CSS</em></li>
							<li><a href="#icons">Icons</a></li>
							<li><a href="#animate">Animate</a></li>
							<li><a href="#colors">Colors</a></li>
							<li><a href="#layout">Layout</a></li>
							<li><a href="#offscreen">Off screen</a></li>
							<li><a href="#utilities">Utilities</a></li>
							<li class="dropdown-header b-b b-light"><em>Components</em></li>
							<li><a href="#toggle-class">Toggle class</a></li>
							<li><a href="#shift">Shift</a></li>
							<li><a href="#bjax">Bjax</a></li>
							<li><a href="#button-state">Button state</a></li>
							<li><a href="#dropdown-select">Dropdown select</a></li>
							<li class="dropdown-header b-b b-light"><em>Plugins</em></li>
							<li><a href="#plugins">Plugins docs</a></li>
						</ul>
					</nav>
				</section>
			</section>
		</aside>
		<!-- /.aside -->
		<section id="content">
			<section class="vbox">
				<section class="scrollable bg-light lter" data-spy="scroll"
					data-target=".nav-primary">
					<section id="docs">
						<div class="clearfix padder">
							<h3>Overview</h3>
							<h5 class="m-t-lg">A fully responsive web app template.</h5>
							<h3 class="text-success">
								CSS <small>Extensible classes</small>
							</h3>
							<div class="line"></div>
							<p id="bootstrap">
								For the bootstrap css and components, please check the <strong><a
									href="http://getbootstrap.com">Bootstrap 3</a></strong>
							</p>

							<h4 class="m-t-lg">LESS</h4>
							<p>This file's css is generated by LESS files. you can use
								the less.php to output the css. There are many Variables, Mixins
								you can use.</p>

							<h4 id="icons" class="m-t-lg">Icons</h4>
							<p>
								Use FontAwesome font icons, over 369 icons with version 4.0 and
								more will be added in the future, check <strong><a
									href="http://fortawesome.github.io/Font-Awesome/">FontAwesome</a></strong>
								for more details to see how to use and examples
							</p>

							<h4 id="animate" class="m-t-lg">Animate.css</h4>
							<p>
								<a href="http://daneden.me/animate/"><strong>animate.css</strong></a>
								is a bunch of cool, fun, and cross-browser animations for you to
								use in your projects. Great for emphasis, home pages, sliders,
								and general just-add-water-awesomeness. do not use animate css
								to an element which contains the dropdown-menu, it will cut the
								edge.
							</p>
							<p>
								<strong>animate.css on landing page</strong>: you can add
								animate css on the dom element when it appear in the viewpoint.
								<code>&lt;div data-ride="animated"
									data-animation="fadeInUp" data-delay="250">&lt;/div></code>
							</p>

							<h4 id="colors" class="m-t-lg">
								Colors <small>use less file to build your colors</small>
							</h4>
							<p>
								8 default color palettes, build colorful widgets. you can open
								the less/app.variables.less to config your own colors(
								<code>@brand-primary, @brand-success, @brand-warning,
									@brand-danger, @brand-info, @brand-black, @brand-dark,
									@brand-light</code>
								).
							</p>
							<p>
								You can use the mixin wariant. use
								<code>.color-variant</code>
								and
								<code>.font-variant</code>
								to build the color scheme, check more details in the
								less/app.colors.less.
							</p>
							<div class="row">
								<div class="col-sm-3">
									<p>.bg-light</p>
									<div class="bg-light">
										<h5 class="dker m-n wrapper">.dker</h5>
										<h5 class="dk m-n wrapper">.dk</h5>
										<h5 class=" m-n wrapper">.bg-light</h5>
										<h5 class="lt m-n wrapper">.lt</h5>
										<h5 class="lter m-n wrapper">.lter</h5>
									</div>
								</div>
								<div class="col-sm-3">
									<p>.bg-dark</p>
									<div class="bg-dark">
										<h5 class="dker m-n wrapper">.dker</h5>
										<h5 class="dk m-n wrapper">.dk</h5>
										<h5 class=" m-n wrapper">.bg-dark</h5>
										<h5 class="lt m-n wrapper">.lt</h5>
										<h5 class="lter m-n wrapper">.lter</h5>
									</div>
								</div>
								<div class="col-sm-3">
									<p>.bg-black</p>
									<div class="bg-black">
										<h5 class="dker m-n wrapper">.dker</h5>
										<h5 class="dk m-n wrapper">.dk</h5>
										<h5 class=" m-n wrapper">.bg-black</h5>
										<h5 class="lt m-n wrapper">.lt</h5>
										<h5 class="lter m-n wrapper">.lter</h5>
									</div>
								</div>
								<div class="col-sm-3">
									<p>.bg-primary</p>
									<div class="bg-primary">
										<h5 class="dker m-n wrapper">.dker</h5>
										<h5 class="dk m-n wrapper">.dk</h5>
										<h5 class=" m-n wrapper">.bg-primary</h5>
										<h5 class="lt m-n wrapper">.lt</h5>
										<h5 class="lter m-n wrapper">.lter</h5>
									</div>
								</div>
							</div>
							<div class="row m-t-sm">
								<div class="col-sm-3">
									<p>.bg-success</p>
									<div class="bg-success">
										<h5 class="dker m-n wrapper">.dker</h5>
										<h5 class="dk m-n wrapper">.dk</h5>
										<h5 class=" m-n wrapper">.bg-success</h5>
										<h5 class="lt m-n wrapper">.lt</h5>
										<h5 class="lter m-n wrapper">.lter</h5>
									</div>
								</div>
								<div class="col-sm-3">
									<p>.bg-info</p>
									<div class="bg-info">
										<h5 class="dker m-n wrapper">.dker</h5>
										<h5 class="dk m-n wrapper">.dk</h5>
										<h5 class=" m-n wrapper">.bg-info</h5>
										<h5 class="lt m-n wrapper">.lt</h5>
										<h5 class="lter m-n wrapper">.lter</h5>
									</div>
								</div>
								<div class="col-sm-3">
									<p>.bg-warning</p>
									<div class="bg-warning">
										<h5 class="dker m-n wrapper">.dker</h5>
										<h5 class="dk m-n wrapper">.dk</h5>
										<h5 class=" m-n wrapper">.bg-warning</h5>
										<h5 class="lt m-n wrapper">.lt</h5>
										<h5 class="lter m-n wrapper">.lter</h5>
									</div>
								</div>
								<div class="col-sm-3">
									<p>.bg-danger</p>
									<div class="bg-danger">
										<h5 class="dker m-n wrapper">.dker</h5>
										<h5 class="dk m-n wrapper">.dk</h5>
										<h5 class=" m-n wrapper">.bg-danger</h5>
										<h5 class="lt m-n wrapper">.lt</h5>
										<h5 class="lter m-n wrapper">.lter</h5>
									</div>
								</div>
							</div>
							<h4 id="layout" class="m-t-lg">Layout</h4>
							<p>use .vbox(vertical box) and .hbox(horizontal box) to build
								the web application layout. you can build the complicated layout
								as you want.</p>
							<h5>
								<strong>hbox</strong>
							</h5>
							<p>
								hbox is a horizontal wrapper that you can put columns in it. you
								can put
								<code>&lt;aside></code>
								and
								<code>&lt;section></code>
								in it.
							</p>
							<pre>
								<code class="html">&lt;section class="hbox">&lt;aside class="aside-lg">&lt;/aside>&lt;section>&lt;/section>&lt;/section></code>
							</pre>
							<p>
								you can use
								<code>.aside, .aside-sm, .aside-md, .aside-lg</code>
								to set the width of an aside wrapper. also you can use the
								Bootstrap grid system, like
								<code>.col-6, .col-7</code>
								...
							</p>
							<p>
								.stretch box has the 100% height.
								<code>&lt;section class="hbox stretch">&lt;/section></code>
							</p>
							<h5>
								<strong>vbox</strong>
							</h5>
							<p>vbox is a vertical wrapper that you can put the row in it.
							</p>
							<pre>
								<code class="html">&lt;section class="vbox">&lt;header class="header">&lt;/header>&lt;section class="w-f">&lt;/section>&lt;footer class="footer">&lt;/footer>&lt;/section></code>
							</pre>
							<p>.w-f means this vbox have a footer</p>
							<p>.flex vbox let you put a flex height of the header/footer.</p>
							<pre>
								<code class="html">&lt;section class="vbox flex">&lt;header>&lt;/header>&lt;section>&lt;section>&lt;section>&lt;/section>&lt;/section>&lt;/section>&lt;footer>&lt;/footer>&lt;/section></code>
							</pre>
							<h5>
								<strong>Example</strong>
							</h5>
							<div class="row">
								<div class="col-sm-6">
									<p>.hbox</p>
									<div style="height: 250px">
										<div class="app">
											<section class="hbox stretch bg-light">
												<aside class="lt">aside</aside>
												<section>section</section>
												<aside class="dk">aside</aside>
											</section>
										</div>
									</div>
								</div>
								<div class="col-sm-6">
									<p>.vbox</p>
									<div style="height: 250px">
										<div class="app">
											<section class="vbox bg-light">
												<header class="header lt">
													<span class="pull-in">header</span>
												</header>
												<footer class="footer dk">
													<span class="pull-in">footer</span>
												</footer>
												<section>section</section>
											</section>
										</div>
									</div>
								</div>
							</div>
							<h5>
								<strong>Application layout</strong>
							</h5>
							<p>
								you can use the .app on the html tag to build the app layout
								<code>&lt;html class="app">&lt;/html></code>
							</p>
							<h4 id="offscreen" class="m-t-lg">Off screen nav</h4>
							<p>Support three nav styles on mobile, "Pull down", "push
								left", "push right"</p>
							<h5>
								<strong>Pull down</strong>
							</h5>
							<p>
								use
								<code>data-toggle="class:show" data-target=".nav-primary"</code>
								to trigger the nav pull down in the header
							</p>
							<pre>
								<code class="html">
									<a class="btn btn-link visible-xs" data-toggle="class:show"
										data-target=".nav-primary">
          <i class="icon-reorder"></i>
        </a>
								</code>
							</pre>
							<h5>
								<strong>off screen push left</strong>
							</h5>
							<p>
								use
								<code>data-toggle="class:nav-off-screen"
									data-target="#nav"</code>
								to trigger the off screen nav
							</p>
							<pre>
								<code class="html">
									<a class="btn btn-link visible-xs"
										data-toggle="class:nav-off-screen" data-target="#nav">
        <i class="icon-reorder"></i>
        </a>
								</code>
							</pre>
							<p>
								use
								<code>data-toggle="class:nav-off-screen"
									data-target="#nav"</code>
								to toggle back in the body
							</p>
							<pre>
								<code class="html">
									<a href="#" class="hide nav-off-screen-block"
										data-toggle="class:nav-off-screen" data-target="#nav"></a>
								</code>
							</pre>
							<h5>
								<strong>off screen push right</strong>
							</h5>
							<p>
								use
								<code>data-toggle="class:nav-off-screen push-right"
									data-target="body"</code>
							</p>
							<pre>
								<code class="html">
									<a class="btn btn-link visible-xs"
										data-toggle="class:nav-off-screen push-right"
										data-target="body">
        <i class="icon-reorder"></i>
        </a>
								</code>
							</pre>


							<h3 id="utilities" class="text-danger">CSS Utilities</h3>
							<table class="table table-border">
								<tbody>
									<tr class="bg-light">
										<td colspan="2">Button size <em>(Specific button
												size)</em></td>
									</tr>
									<tr>
										<td>.btn-s-xs</td>
										<td>width:90px</td>
									</tr>
									<tr>
										<td>.btn-s-sm</td>
										<td>width:100px</td>
									</tr>
									<tr>
										<td>.btn-s-md</td>
										<td>width:120px</td>
									</tr>
									<tr>
										<td>.btn-s-lg</td>
										<td>width:150px</td>
									</tr>
									<tr>
										<td>.btn-s-xl</td>
										<td>width:200px</td>
									</tr>
									<tr>
										<td>.btn-rounded</td>
										<td>rounded button</td>
									</tr>
									<tr>
										<td>.btn-icon</td>
										<td>square icon button</td>
									</tr>
									<tr class="bg-light">
										<td colspan="2">Vertical align <em>(When you use the
												.hbox you can use these classes on the aside)</em></td>
									</tr>
									<tr>
										<td>.v-middle</td>
										<td>vertical align: middle</td>
									</tr>
									<tr>
										<td>.v-top</td>
										<td>vertical align: top</td>
									</tr>
									<tr>
										<td>.v-bottom</td>
										<td>vertical align: bottom</td>
									</tr>
									<tr class="bg-light">
										<td colspan="2">Margin</td>
									</tr>
									<tr>
										<td>.m</td>
										<td>margin: 15px</td>
									</tr>
									<tr>
										<td>.m-xs</td>
										<td>margin: 5px</td>
									</tr>
									<tr>
										<td>.m-sm</td>
										<td>margin: 10px</td>
									</tr>
									<tr>
										<td>.m-md</td>
										<td>margin: 20px</td>
									</tr>
									<tr>
										<td>.m-lg</td>
										<td>margin: 30px</td>
									</tr>
									<tr>
										<td>.m-n</td>
										<td>margin: 0px</td>
									</tr>
									<tr>
										<td>.m-l</td>
										<td>margin-left: 15px</td>
									</tr>
									<tr>
										<td>.m-l-xs</td>
										<td>margin-left: 5px</td>
									</tr>
									<tr>
										<td>.m-l-sm</td>
										<td>margin-left: 10px</td>
									</tr>
									<tr>
										<td>.m-l-md</td>
										<td>margin-left: 20px</td>
									</tr>
									<tr>
										<td>.m-l-lg</td>
										<td>margin-left: 30px</td>
									</tr>
									<tr>
										<td>.m-l-xl</td>
										<td>margin-left: 40px</td>
									</tr>
									<tr>
										<td>.m-l-none</td>
										<td>margin-left: 0px</td>
									</tr>
									<tr>
										<td>.m-l-n</td>
										<td>margin-left: -15px</td>
									</tr>
									<tr>
										<td>.m-l-n-xxs</td>
										<td>margin-left: -1px</td>
									</tr>
									<tr>
										<td>.m-l-n-xs</td>
										<td>margin-left: -5px</td>
									</tr>
									<tr>
										<td>.m-l-n-sm</td>
										<td>margin-left: -10px</td>
									</tr>
									<tr>
										<td>.m-l-n-md</td>
										<td>margin-left: -20px</td>
									</tr>
									<tr>
										<td>.m-l-n-lg</td>
										<td>margin-left: -30px</td>
									</tr>
									<tr>
										<td>.m-l-n-xl</td>
										<td>margin-left: -40px</td>
									</tr>
									<tr>
										<td colspan="2">.m-r <em>(margin right)</em> , m-t <em>(margin
												top)</em> , m-b <em>(margin bottom)</em> have the same classes as
											the .m-l.
										</td>
									</tr>
									<tr class="bg-light">
										<td colspan="2">Border</td>
									</tr>
									<tr>
										<td>.b-a</td>
										<td>border:1px solid @border-color(see
											app.variables.less)</td>
									</tr>
									<tr>
										<td>.b-l</td>
										<td>border left</td>
									</tr>
									<tr>
										<td>.b-t</td>
										<td>border top</td>
									</tr>
									<tr>
										<td>.b-r</td>
										<td>border right</td>
									</tr>
									<tr>
										<td>.b-b</td>
										<td>border bottom</td>
									</tr>
									<tr>
										<td>.b-light, .b-dark, .b-primary, .b-success, .b-info,
											.b-warning, .b-danger, .b-black, .b-white</td>
										<td>border with specific color.</td>
									</tr>
									<tr>
										<td>.b-2x</td>
										<td>border width with 2px</td>
									</tr>
									<tr>
										<td>.b-3x</td>
										<td>border width with 3px</td>
									</tr>
									<tr class="bg-light">
										<td colspan="2">Radius</td>
									</tr>
									<tr>
										<td>.r</td>
										<td>border-radius: @border-radius-base</td>
									</tr>
									<tr>
										<td>.r-l</td>
										<td>border-radius: @border-radius-base 0 0
											@border-radius-base</td>
									</tr>
									<tr>
										<td>.r-r</td>
										<td>border-radius: 0 @border-radius-base
											@border-radius-base 0</td>
									</tr>
									<tr>
										<td>.r-t</td>
										<td>border-radius: @border-radius-base
											@border-radius-base 0 0</td>
									</tr>
									<tr>
										<td>.r-b</td>
										<td>border-radius: 0 0 @border-radius-base
											@border-radius-base</td>
									</tr>
									<tr class="bg-light">
										<td colspan="2">Padder and Wrapper</td>
									</tr>
									<tr>
										<td>.padder</td>
										<td>padding-left: 15px; padding-right: 15px</td>
									</tr>
									<tr>
										<td>.padder-v</td>
										<td>padding-top: 15px; padding-bottom: 15px</td>
									</tr>
									<tr>
										<td>.padder-md</td>
										<td>padding-top: 20px; padding-bottom: 20px</td>
									</tr>
									<tr>
										<td>.padder-lg</td>
										<td>padding-top: 30px; padding-bottom: 30px</td>
									</tr>
									<tr>
										<td>.no-padder</td>
										<td>padding: 0</td>
									</tr>
									<tr>
										<td>.wrapper</td>
										<td>padding: 15px</td>
									</tr>
									<tr>
										<td>.wrapper-sm</td>
										<td>padding: 10px</td>
									</tr>
									<tr>
										<td>.wrapper-xs</td>
										<td>padding: 5px</td>
									</tr>
									<tr>
										<td>.wrapper-md</td>
										<td>padding: 20px</td>
									</tr>
									<tr>
										<td>.wrapper-lg</td>
										<td>padding: 30px</td>
									</tr>
									<tr>
										<td>.wrapper-xl</td>
										<td>padding: 50px</td>
									</tr>
									<tr class="bg-light">
										<td colspan="2">Text</td>
									</tr>
									<tr>
										<td>.text-u-c</td>
										<td>text uppercase</td>
									</tr>
									<tr>
										<td>.text-l-t</td>
										<td>text line through</td>
									</tr>
									<tr>
										<td>.text-u-l</td>
										<td>text under line</td>
									</tr>
									<tr>
										<td>.text-ellipsis</td>
										<td>display text in one line with ellipsis</td>
									</tr>
									<tr>
										<td>.text-center-xs</td>
										<td>center text only on extra small devices</td>
									</tr>
									<tr>
										<td>.text-left-xs</td>
										<td>align text left only on extra small devices</td>
									</tr>
									<tr>
										<td>.text-right-xs</td>
										<td>align text right only on extra small devices</td>
									</tr>
									<tr class="bg-light">
										<td colspan="2">Item</td>
									</tr>
									<tr>
										<td>.item-overlay</td>
										<td>overlay the element on an item, default display:none,
											with '.active' class will show</td>
									</tr>
									<tr>
										<td>.opactiy</td>
										<td>background with transparent</td>
									</tr>
									<tr>
										<td>.gd</td>
										<td>background with gradient</td>
									</tr>
									<tr>
										<td>.top</td>
										<td>top element on a item element</td>
									</tr>
									<tr>
										<td>.bottom</td>
										<td>bottom element on a item element</td>
									</tr>
									<tr>
										<td>.center</td>
										<td>center element on a item element</td>
									</tr>
									<tr class="bg-light">
										<td colspan="2">Media</td>
									</tr>
									<tr>
										<td>.img-full</td>
										<td>width: 100%</td>
									</tr>
									<tr>
										<td>.thumb-lg</td>
										<td>width: 128px</td>
									</tr>
									<tr>
										<td>.thumb-md</td>
										<td>width: 64px</td>
									</tr>
									<tr>
										<td>.thumb</td>
										<td>width: 50px</td>
									</tr>
									<tr>
										<td>.thumb-sm</td>
										<td>width: 48px</td>
									</tr>
									<tr>
										<td>.thumb-xs</td>
										<td>width: 38px</td>
									</tr>
									<tr class="bg-light">
										<td colspan="2">Avatar</td>
									</tr>
									<tr>
										<td>.avatar</td>
										<td>circle photo</td>
									</tr>
									<tr>
										<td>status</td>
										<td>status, '.on', '.off', '.busy', '.away'</td>
									</tr>
									<tr>
										<td>status position</td>
										<td>status position, '.right', '.bottom'</td>
									</tr>
									<tr>
										<td>status size</td>
										<td>status size, '.sm', '.md'</td>
									</tr>
								</tbody>
							</table>

							<h3 class="text-info">
								Components <small>Lightweight components to best
									practice on mobile</small>
							</h3>
							<div class="line"></div>


							<h4 id="toggle-class">Toggle class</h4>
							<p>It's easy to change a dom class by click on another dom
								element.</p>
							<h5>
								<strong>Usage</strong>
							</h5>
							<p>
								Add
								<code>data-toggle="class:className"</code>
								and
								<code>data-target="#target"</code>
								to a link or button to toggle a class.
							</p>
							<h5>
								<strong>Example</strong>
							</h5>
							<a href="#" class="btn btn-default m-b"
								data-toggle="class:btn-* btn-success"> Toggle the background
							</a>
							<pre>
								<code class="html">
									<button class="btn btn-default" data-toggle="class:btn-success"
										data-target="#btn">
          
          
          
          Toggle the background
        </button>
								</code>
							</pre>

							<h4 id="shift" class="m-t-lg">Shift</h4>
							<p>Shift js let you change the dom which have different
								position from mobile to desktop, it avoid to use duplicate
								elements.</p>
							<div id="shift-target">
								<strong>Usage</strong>
							</div>
							<p>
								Add
								<code>data-toggle="shift:insertBefore"</code>
								and
								<code>data-target="#target"</code>
								to the dom that you want to shift.
							</p>
							<div class="panel shift b-light" data-toggle="shift:insertBefore"
								data-target="#shift-target">
								<div class="panel-body">Put me before "Usage" on mobile</div>
							</div>
							<pre>
								<code class="html">&lt;div class="shift" data-toggle="shift:insertBefore" data-target="#shift-target">
          Put me before "Usage" on mobile
        &lt;/div></code>
							</pre>
							<p>
								it also support
								<code>data-toggle="shift:appendTo"</code>
								,
								<code>data-toggle="shift:prependTo"</code>
								,
								<code>data-toggle="shift:insertAfter"</code>
							</p>


							<h4 id="bjax" class="m-t-lg">Bjax</h4>
							<p>Bjax let you load page via ajax method</p>
							<h5>
								<strong>Usage</strong>
							</h5>
							<p>
								Add
								<code>data-bjax</code>
								to a link or button.<br>
								<code>data-url</code>
								load content url<br>
								<code>data-target</code>
								load content to a target element<br>
								<code>data-el</code>
								just get element from the loaded content<br>
								<code>data-replace</code>
								replace the location<br>
							</p>
							<h5>
								<strong>Example</strong>
							</h5>
							<a href="ajax.pie.html" data-bjax data-target="#bjax-target"
								class="btn btn-default">Load Me</a> <a href="blog.html"
								data-bjax data-target="#bjax-target" data-el="#content .row"
								class="btn btn-default">Load Page Element</a> <a
								href="index.html" data-bjax class="btn btn-default">Load
								Page</a>
							<div id="bjax-target" class="clearfix m-t m-b"></div>

							<pre>
								<code class="html">
									<a href="blog.html" data-bjax data-target="#bjax-target"
										data-el="#content .row" class="btn btn-default">Load Page Element</a>
								</code>
							</pre>
							<h4 id="button-state" class="m-t-lg">Button state</h4>
							<p>
								Change the button state when click on it. add
								<code>.text</code>
								<code>.text-active</code>
							</p>
							<h5>
								<strong>Example</strong>
							</h5>
							<button class="btn btn-default m-b" data-toggle="button">
								<span class="text">More</span> <span class="text-active">Less</span>
							</button>
							<pre>
								<code class="html">
									<button class="btn btn-default" data-toggle="button">
        
        
        
        <span class="text">More</span>
        <span class="text-active">Less</span>
        </button>
								</code>
							</pre>
							<h5>
								<strong>With icons</strong>
							</h5>
							<button class="btn btn-default m-b" data-toggle="button">
								<span class="text"> <i
									class="fa fa-thumbs-up text-success"></i> 25
								</span> <span class="text-active"> <i
									class="fa fa-thumbs-down text-danger"></i> 10
								</span>
							</button>
							<pre>
								<code class="html">
									<button class="btn btn-default" data-toggle="button">
        
        
        
        <span class="text">
          <i class="fa fa-thumbs-up text-success"></i> 25
        </span>
        <span class="text-active">
          <i class="fa fa-thumbs-down text-danger"></i> 10
        </span>
        </button>
								</code>
							</pre>

							<h4 id="dropdown-select" class="m-t-lg">Dropdown select</h4>
							<p>Support radio and checkbox dropdown select</p>
							<h5>
								<strong>Usage</strong>
							</h5>
							<p>
								add
								<code>.dropdown-menu</code>
								class on dropdown-menu.
							</p>
							<div class="btn-group">
								<button data-toggle="dropdown"
									class="btn btn-sm btn-default dropdown-toggle">
									<span class="dropdown-label">Option1</span> <span class="caret"></span>
								</button>
								<ul class="dropdown-menu dropdown-select">
									<li class="active"><input type="radio" name="d-s-r"
										checked=""><a href="#">Option1</a></li>
									<li><input type="radio" name="d-s-r"><a href="#">Option2</a></li>
									<li><input type="radio" name="d-s-r"><a href="#">Option3</a></li>
									<li class="disabled"><input type="radio" name="d-s-r"
										disabled=""><a href="#">I'm disabled</a></li>
								</ul>
							</div>
							<pre class="m-t">
								<code class="html">&lt;div class="btn-group">
        <button data-toggle="dropdown"
										class="btn btn-sm btn-default dropdown-toggle">
          
          
          
          <span class="dropdown-label">Option1</span> 
          <span class="caret"></span>
        </button>
        &lt;ul class="dropdown-menu dropdown-select">
            &lt;li class="active"><input type="radio" name="d-s-r"
										checked=""><a href="#">Option1</a>&lt;/li>
            &lt;li><input type="radio" name="d-s-r"><a href="#">Option2</a>&lt;/li>
            &lt;li><input type="radio" name="d-s-r"><a href="#">Option3</a>&lt;/li>
            &lt;li class="disabled"><input type="radio" name="d-s-r"
										disabled=""><a href="#">I'm disabled</a>&lt;/li>
        &lt;/ul>
        &lt;/div>
        </code>
							</pre>
							<div class="btn-group">
								<button data-toggle="dropdown"
									class="btn btn-sm btn-default dropdown-toggle">
									<span class="dropdown-label" data-placeholder="Please select">Please
										select</span> <span class="caret"></span>
								</button>
								<ul class="dropdown-menu dropdown-select">
									<li><input type="checkbox" name="d-s-c-1"><a
										href="#">Option1</a></li>
									<li><input type="checkbox" name="d-s-c-2"><a
										href="#">Option2</a></li>
									<li><input type="checkbox" name="d-s-c-3"><a
										href="#">Option3</a></li>
									<li><input type="checkbox" name="d-s-c-4"><a
										href="#">Option4</a></li>
									<li><input type="checkbox" name="d-s-c-5"><a
										href="#">Option5</a></li>
								</ul>
							</div>
							<pre class="m-t">
								<code class="html">&lt;div class="btn-group">
        <button data-toggle="dropdown"
										class="btn btn-sm btn-default dropdown-toggle">
          
          
          
          <span class="dropdown-label" data-placeholder="Please select">Please select</span> 
          <span class="caret"></span>
        </button>
        &lt;ul class="dropdown-menu dropdown-select">
          &lt;li><input type="checkbox" name="d-s-c-1"><a
										href="#">Option1</a>&lt;/li>
          &lt;li><input type="checkbox" name="d-s-c-2"><a
										href="#">Option2</a>&lt;/li>
          &lt;li><input type="checkbox" name="d-s-c-3"><a
										href="#">Option3</a>&lt;/li>
          &lt;li><input type="checkbox" name="d-s-c-4"><a
										href="#">Option4</a>&lt;/li>
          &lt;li><input type="checkbox" name="d-s-c-5"><a
										href="#">Option5</a>&lt;/li>
        &lt;/ul>
        &lt;/div>
        </code>
							</pre>
							<h3 class="text-info" id="plugins">Plugins</h3>
							<div class="line"></div>
							<div class="row">
								<div class="col-md-6">
									<h4 class="m-t-lg">jPlayer</h4>
									<p>
										Check the online <a href="http://jplayer.org/"><strong>document</strong></a>
									<h4 class="m-t-lg">Datatables</h4>
									<p>
										Check the online <a href="http://datatables.net/"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Google map</h4>
									<p>
										Check the online <a href="http://hpneo.github.com/gmaps/"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">JvectorMap</h4>
									<p>
										Check the online <a href="http://jvectormap.com/"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Markdown</h4>
									<p>
										Check the online <a
											href="https://github.com/OscarGodson/EpicEditor"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Nestable</h4>
									<p>
										Check the online <a href="http://dbushell.github.io/Nestable/"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Slider</h4>
									<p>
										Check the online <a
											href="http://www.eyecon.ro/bootstrap-slider"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">WYSISYG</h4>
									<p>
										Check the online <a
											href="http://github.com/mindmup/bootstrap-wysiwyg"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Wizard</h4>
									<p>
										Check the online <a
											href="https://github.com/VinceG/twitter-bootstrap-wizard"><strong>document</strong></a>.
									</p>
								</div>
								<div class="col-md-6">
									<h4 class="m-t-lg">Tiles</h4>
									<p>
										Check the online <a
											href="https://github.com/thinkpixellab/tilesjs"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Sortable</h4>
									<p>
										Check the online <a
											href="http://farhadi.ir/projects/html5sortable"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Flotchart</h4>
									<p>
										Check the online <a href="http://www.flotcharts.org/"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Sparklines</h4>
									<p>
										Check the online <a
											href="http://omnipotent.net/jquery.sparkline"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Easy pie chart</h4>
									<p>
										Check the online <a
											href="http://rendro.github.io/easy-pie-chart"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Parsley</h4>
									<p>
										Check the online <a href="http://parsleyjs.org/"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Chosen</h4>
									<p>
										Check the online <a href="http://github.com/harvesthq/chosen"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">Datepicker</h4>
									<p>
										Check the online <a
											href="http://www.eyecon.ro/bootstrap-datepicker"><strong>document</strong></a>.
									</p>

									<h4 class="m-t-lg">File-input</h4>
									<p>
										Check the online <a
											href="http://dev.tudosobreweb.com.br/bootstrap-filestyle/"><strong>document</strong></a>.
									</p>
								</div>
							</div>
							<h4 class="m-t-lg">Cross browser compatibility</h4>
							<p>Use response.js to support IE8 media queries and html5.js
								to support html5 markups.</p>
							<pre>
								<code class="html">
									<!--[if lt IE 9]>
        <script src="js/ie/respond.min.js"></script>
        <script src="js/ie/html5.js"></script>
        <script src="js/ie/excanvas.js"></script>
        <![endif]-->
								</code>
							</pre>
						</div>
					</section>
				</section>
			</section>
		</section>
	</section>
	<script src="js/jquery.min.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.js"></script>
	<!-- App -->
	<script src="js/app.js"></script>
	<script src="js/slimscroll/jquery.slimscroll.min.js"></script>
	<!-- Easy Pie Chart -->
	<script src="js/charts/easypiechart/jquery.easy-pie-chart.js"></script>
	<script src="js/app.plugin.js"></script>
	<script type="text/javascript" src="js/jPlayer/jquery.jplayer.min.js"></script>
	<script type="text/javascript"
		src="js/jPlayer/add-on/jplayer.playlist.min.js"></script>
	<script type="text/javascript" src="js/jPlayer/demo.js"></script>

</body>
</html>